<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="style/fjol_style.css" rel="stylesheet" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
   		
    </script>
	</head>
	<style>
		#segmentedControls .mui-control-item {
				line-height: 40px;
				width: 100%;
			}
	</style>
	<body>
		<span class="abs dn" id="bgZhezhao" style="top: 0; bottom: 0; width: 100%; background: rgba(0,0,0,0.3); z-index: 1;"></span>
		<header class="mui-bar mui-bar-nav p0">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <div id="openSearchPage">
		        	<span class="mui-icon mui-icon-search"></span>
		        	<span>请输入小区名或地址</span>
		        </div>
		    
		
			<div class="fj-house-tab rel pb5" style="background: #EEEEEE;">
			<div class="mui-segmented-control" id="searchPageMenu">
		          <a class="mui-control-item tab-a"><span>不限区域</span><b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item tab-a"><span>不限总价</span><b class="down-triangle ml2"></b></a>

		      </div>
		      <div class="fj-house-tab-div abs" style="z-index: 9;">
		      	<div class="mui-row mui-hidden house-tab-ul bg-white" id="item1">
	      	        <div class="mui-col-xs-4 bg-white" style=" max-height: 300px; overflow-y: auto;">
						<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							<a class="mui-control-item" id="allArea" href="">
			  	                 不限区域
			  	            </a>
						</div>
					</div>
					<div id="segmentedControlContents" class="mui-col-xs-8" style="border-left: 1px solid #c8c7cc; max-height: 300px; overflow-y: auto;">
						<div id="item1" class="mui-control-content mui-active">
						</div>
					</div>
	      	        
	      	    </div>
		      	    <ul class="mui-table-view mui-hidden house-tab-ul">
		      	            <li class="mui-table-view-cell" data-value = "0">
		      	                    不限均价
		      	            </li>
		      	            <li class="mui-table-view-cell" data-value = "0-10000">
		      	                     10000元以下
		      	            </li>
		      	            <li class="mui-table-view-cell" data-value = "10000-12000">
		      	                     10000-12000元
		      	            </li>
		      	                <li class="mui-table-view-cell" data-value = "12000-15000">
		      	                        12000-15000元
		      	                </li>
		      	                <li class="mui-table-view-cell" data-value = "15000-18000">
		      	                        15000-18000元
		      	                </li>
		      	                <li class="mui-table-view-cell" data-value = "18000-20000">
		      	                        18000-20000元
		      	                </li>
		      	                <li class="mui-table-view-cell" data-value = "20000-50000000">
		      	                        20000元以上
		      	                </li>
		      	           </ul>
		      	           
		      </div>
		   </div>
		   
		</header>
		<div class="mui-content rel" style="top: 45px;">
		    <div class="mui-scroll-wrapper">
		        <div class="mui-scroll" id="refreshContainer">
		            <!--这里放置真实显示的DOM内容-->
		            <ul class="mui-table-view" id="houselist">
		                
		            </ul>
		        </div>
		    </div>
		    
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/network.js"></script>
		<script src="js/fj_area_util.js"></script>
		<script src="js/fj_base_data.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<!-- 选择区域 -->
		<script id="areaTmpl" type="text/x-jquery-tmpl">
  	            <a class="mui-control-item" id="${id}" href="#content${id}">
  	                 ${areaName}
  	            </a>
		</script>
		<!-- 列表cont -->
		<script id="houseListTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell" id="${id}">
		        <a href="javascript:;" class="mui-navigate-right" style="padding-right:20px;">
		            <img class="mui-pull-left mr5" width="100" height="80" src="${coverImage}">
		            <div class="mui-media-body">
		                <span style="font-weight: bold;">${name}</span>
		                <div class="mui-clearfix">
		                	<span class="mui-badge mui-badge-success mui-badge-inverted f14 mui-pull-right"></span>
		                	<p class="mui-ellipsis mt10">${averagePrice}万/平  建筑面积 ${buildingSquare}平方</p>
		                	
		                </div>
		            </div>
		        </a>
		    </li>
		</script>
		
		
		<script type="text/javascript">
		mui.init({
				pullRefresh:{
					container:"#refreshContainer",
					down:{
						callback: pulldownRefresh
					},
					up:{
						callback:pullupRefresh
					}
				}

		});	
			
			var pagevalue =1;
			
			var searchKey = 0,
				 areaIdentId=0,
				streetIdentId=0,
				 housePrice = 0,
				bedRoomNumber=0;
			
			function pulldownRefresh(){
				
				$('.mui-pull').hide();
				setTimeout(function(){
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
					getHouseList(1,true,areaIdentId,streetIdentId,housePrice);
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
					return pagevalue=1;
				},1000);
			}
			function pullupRefresh(){
				
				$('.mui-pull').show();
				setTimeout(function(){
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
					pagevalue++;
					getHouseList(pagevalue,false,areaIdentId,streetIdentId,housePrice);
				},1000);
			}
			
			mui.plusReady(function(){
				
				getHouseList(1,false,areaIdentId,streetIdentId,housePrice);
				mui('#houselist').on('tap','li',function(){
					mui.openWindowWithTitle({
						url:'new_house/newHouse_detail.html',
						id:'newHouse_detail',
						extras:{
							buildingId:this.getAttribute('id'),
							parentid:'new_house'
						}
					},{
						title:{
							text:'楼盘详情'
						},
						back:{
							image:{
					            base64Data:''
					        }
						}
					});
				});
				
				/*
				 * 选择区域
				 * */
				var currentCity = areaUtils.getCurrentCityChileAreaList();
				
				$('#areaTmpl').tmpl(currentCity,{
					getarrayChildArea:function(){
						
					}
				}).appendTo('#segmentedControls');
				var html = [];
				var contents = document.getElementById("segmentedControlContents");
				for (i in currentCity) {
					var finalAreaList = currentCity[i].arrayChildArea;
					html.push('<div id="content' + currentCity[i].id + '" class="mui-control-content"><ul class="mui-table-view">');
					html.push('<li class="mui-table-view-cell" id="0">全'+currentCity[i].areaName+'</li>');
					for (j in finalAreaList) {
						html.push('<li class="mui-table-view-cell" id="'+finalAreaList[j].id+'">' + finalAreaList[j].areaName + '</li>');
					}
					html.push('</ul></div>');					
				}
				contents.innerHTML = html.join('');
				mui('#segmentedControls').on('tap','a',function(){	//选择区域
					var href_id = this.getAttribute('href');
					var thisId = this.getAttribute('id');
					var idx = $(this).index();
					var div = null;
					var divUl = null;
					pagevalue = 1;
					if(thisId=='allArea'){		//不限区域
						$('.mui-pull').hide();
						areaIdentId = 0;
						streetIdentId=0;
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
						getHouseList(pagevalue,true,areaIdentId,streetIdentId,housePrice);
						$('.mui-segmented-control .tab-a').eq(0).find('span').text(this.text);
						$(this).parents('.house-tab-ul').addClass('mui-hidden');
						$('#bgZhezhao').hide();
					}
					if(href_id){
						div = document.querySelector(href_id);
						divUl = div.querySelector('ul');
					
					if(divUl.innerHTML==''){	//没有街道的情况

						areaIdentId = thisId;
//						console.log(areaIdentId);
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
						getHouseList(pagevalue,true,areaIdentId,streetIdentId,housePrice);
						$('.mui-segmented-control .tab-a').eq(0).find('span').text(this.text);
						$(this).parents('.house-tab-ul').addClass('mui-hidden');
						$('#bgZhezhao').hide();
					}else{						//有街道的情况
						mui(divUl).on('tap','li',function(){
							var liId = this.getAttribute('id');
							streetIdentId = liId;
//							console.log(this.innerHTML);
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
							getHouseList(1,true,areaIdentId,streetIdentId,housePrice);
							$('.mui-segmented-control .tab-a').eq(0).find('span').text(this.innerHTML);
							$(this).parents('.house-tab-ul').addClass('mui-hidden');
							$('#bgZhezhao').hide();
							});
					}
					}
				});		
				
				/*
				 * 选择售价范围
				 */
				mui('ul.house-tab-ul').on('tap','li',function(){
//					console.log();
					var parentsIdx = $(this).parents('.house-tab-ul').index();//父级ul的序号，进而得到tab-a的序号
					var moreParam = {
						key:'1',
						value:'1'
					};
					switch(parentsIdx){
						case 1:	//选择售价的情况
						housePrice = this.getAttribute('data-value');
//						console.log(housePrice);
						getHouseList(1,true,areaIdentId,streetIdentId,housePrice,bedRoomNumber);
						$('.mui-segmented-control .tab-a').eq(parentsIdx).find('span').text(this.innerHTML);
						$(this).parents('.house-tab-ul').addClass('mui-hidden');
						$('#bgZhezhao').hide();
						break;
					}
				});
				
			
			});
			
			function getHouseList(pagevalue,isTrue,areaIdentId,streetIdentId,averagePrice,moreParam){
				
				var param = [{
					key:'searchKey',
					value:''
				},{
					key:'page',
					value:pagevalue
				},{
					key:'rows',
					value:10
				},{
					key:'areaIdentId',
					value:areaIdentId
				},{
					key:'streetIdentId',
					value:streetIdentId
				},{
					key:'averagePrice',
					value:averagePrice
				}];
				if(moreParam){
					param = param.concat(moreParam);
				}
				fjNetwork.get('fjzx/common/search-new-building.json',param,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					if(isTrue){
						document.querySelector('#houselist').innerHTML = '';
						mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
						$('.mui-pull').hide();
					}
					
					$('#houseListTmpl').tmpl(rows,{
						getkeywordArr:function(){
							var keywords = new Array();
							if(this.data.keyword){
								keywords = this.data.keyword.split(',');
							}else{
								keywords = '';
							}
							return keywords;
						}
					}).appendTo('#houselist');
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(rows.length==0);
				},function(msg){
					mui.toast(msg);
				});
			}
	
	document.querySelector('#openSearchPage').addEventListener('tap',function(){
		mui.openWindow({
			url:'fj_search.html',
			extras:{
				parentName:'newHouse_searchList'
			}
		})
	});
	document.addEventListener('getSearchkey',function(event){
		var searchKey = event.detail.searchWord;
		$('#openSearchPage').find('span').eq(1).text(searchKey);
		var searchParam = {
			key:'searchKey',
			value:searchKey
		};
//		console.log(searchKey);
		getHouseList(1,true,0,0,0,0,searchParam);
	});
	
	mui('.mui-segmented-control').on('tap','.tab-a',function(){
		var idx = $(this).index();
		var _ul = $('.fj-house-tab-div').find('.house-tab-ul');
		_ul.eq(idx).toggleClass('mui-hidden').siblings().addClass('mui-hidden');
		if(_ul.eq(idx).hasClass('mui-hidden')){
			$('#bgZhezhao').hide();
		}else{
			$('#bgZhezhao').show();
		}
	});
	$('#bgZhezhao').on('click',function(){
		$('.fj-house-tab-div').find('.house-tab-ul').addClass('mui-hidden');
		$(this).hide();
	});
	
		</script>
	</body>
</html>
